<template>
	<cover-view class="x-one-click-alarm">
		<movable-area class="x-one-click-alarm-movable" v-if="form.service_id">
			<movable-view direction="vertical" class="x-one-click-alarm-movable-view" :y="200">
				<view class="x-one-click-alarm-movable-button" @tap="clickShow" v-if="UserStore.hasLogin()">
					<image src="@/static/icons/one-click-alarm.png" class="image"></image>
				</view>
			</movable-view>
		</movable-area>
		<x-popup v-model="show" mode="center" :round="10" :customStyle="popupStyle" class="x-one-click-alarm-popup">
			<view class="text-center p-4">
				<image src="@/static/icons/one-click-alarm.png" class="image" />
			</view>
			<view class="text-center p-4 title mb-4">遇到危险，向平台求助</view>
			<view class="item" v-if="form.service_id">
				<view class="text-grey h10">服务</view>
				<text class="font-weight-500 h9">{{ form.title }}</text>
			</view>
			<view class="item" v-if="form.service_id&&form.address_id">
				<view class="text-grey h10">服务地址</view>
				<text class="font-weight-500 h9">{{ form.address }}</text>
			</view>
			<view class="item">
				<view class="text-grey h10">当前位置</view>
				<text class="font-weight-500 h9">{{ form.position }}</text>
			</view>
			<button class="btn-danger" @tap="submit">一键报警</button>
		</x-popup>
	</cover-view>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, onBeforeUnmount } from 'vue';
import { useUserStore } from "@/stores";
import { $api, $message, $auth } from "@/utils";
import { useMap } from "@/utils/map";
import { $EventName } from "@/utils/const/env";
let map: any;
const props = withDefaults(defineProps<{
	role?: string
}>(), {
	role: 'user'
});
const UserStore = useUserStore();
const show = ref(false);
const popupStyle = ref({
	width: '60vw',
	minHeight: '80vw',
	height: 'auto',
	padding: '20px',
	backgroundImage: 'radial-gradient(circle at 50% -50%, rgb(186, 31, 26) -100%, transparent 100%)'
});
const form = ref({
	title: '',
	use_role: '',
	service_id: '',
	address: '',
	latitude: '',
	longitude: '',
	position: '定位中...'
})

const getPosition = () => {
	if (!map || !map.isReady()) { return; }
	map.getCurrentPosition().then((result: any) => {
		form.value.latitude = result.position.lat;
		form.value.longitude = result.position.lng;
		getAddress([result.position.lng, result.position.lat]);
	}).catch(() => {
		form.value.position = '定位失败';
	}).finally(() => {
	});
}
const getAddress = (lnglat: any) => {
	map.getAddress(lnglat).then((result: any) => {
		form.value.position = result.formattedAddress;
	}).catch(() => {
		form.value.position = '获取详细地址失败';
	})
}
const initRole = () => {
	if (UserStore.hasLogin()) {
		form.value.use_role = props.role;
		getService();
	}
}
const getService = () => {
	if (UserStore.hasLogin()) {
		if (form.value.use_role === 'technician') {
			$api.AppointmentService.technician().then((data: any) => {
				initData(data)
			}).catch(() => {
			})
		} else {
			$api.AppointmentService.user().then((data: any) => {
				initData(data)
			}).catch(() => {
			})
		}
	}
}
const initData = (e: any) => {
	for (let i = 0; i < e.length; i++) {
		let item = e[i];
		switch (item.state) {
			// 待出发
			case 1:
			// 已出发
			case 2:
			// 已到达
			case 3:
			// 进行中
			case 4:
				$api.AppointmentService.details({
					id: item.id,
					action: form.value.use_role
				}).then((data: any) => {
					form.value.address = `${data.province}${data.city}${data.area}${data.street}${data.address_detail}`;
					form.value.title = data.title;
					form.value.service_id = item.id;
				}).catch(() => {
				}).finally(() => {
				})
				break;
		}
	}
}
const clickShow = () => {
	if (show.value) {
		return;
	}
	show.value = true;
	initRole();
	getPosition();
}
const submit = () => {
	uni.showLoading({ title: '提交中...' });
	$api.Alarm.create(form.value).then((res: any) => {
		$message.success(res.msg);
		show.value = false;
	}).catch((res: any) => {
		$message.error(res.msg);
	}).finally(() => {
		uni.hideLoading();
	})
}
const initMap = () => {
	map = useMap(() => {
		getPosition();
	});
}
onMounted(() => {
	uni.$once($EventName.WEBCONFIG_READY, initMap);
	initRole();
})
onBeforeUnmount(() => {
	uni.$off($EventName.WEBCONFIG_READY, initMap);
})
defineExpose({
    getList:getService
})
</script>

<style lang="scss" scoped>
.x-one-click-alarm-movable {
	position: fixed;
	top: 100px;
	height: calc(100vh - 200px);
	width: 0px;
	right: 0;
	z-index: 99999;
	--height: 63px;
	--width: 63px;

	&-view {
		width: var(--width);
		height: var(--height);
		position: relative;
	}

	&-button {
		position: absolute;
		width: var(--width);
		height: var(--height);
		right: var(--width);

		.image {
			width: var(--height);
			height: var(--width);
		}
	}
}

.x-one-click-alarm-popup {
	.image {
		width: 63px;
		height: 63px;
	}

	.title {
		font-size: 16px;
		color: var(--xl-danger-light-2);
		font-weight: bold;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		gap: 6px;
	}
}
</style>